<template>
  <div class="channelMangement">
    <el-card>
      <div class="pickerOptionSet">
        <span style="font-weight: bold">渠道管理</span>
        <el-button style="font-weight: bold" size="small" type="primary" @click="addChannelSet()">新建渠道</el-button>
      </div>
    </el-card>
    <el-card>
      <div class="pickerOptionSet">
        <div>
          <el-input size="small" style="width:150px" v-model="channelName"  placeholder="渠道名称"></el-input>
          <el-button style="font-weight: bold" size="small" type="primary" @click="getDataChannel(1)">查询</el-button>
        </div>
        <div>共{{totalCount.number}}条数据</div>
      </div>
    </el-card>
    <el-card>
      <div style="border: 1px solid #e3e2e2;border-top: 0">
        <el-table stripe :data="tableData" style="width: 100%;margin-top:20px" size="mini">
          <el-table-column prop="channelName" label="渠道名称"></el-table-column>
          <el-table-column class-name="status-col" label="属性" prop="channelType"
                           :filters="[{ text: '线上', value: '线上' }, { text: '线下', value: '线下' }]"
                           :filter-method="filterTag" filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag :type="scope.row.channelType | statusFilter">{{scope.row.channelType }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column class-name="status-col" label="状态" prop="status"
                           :filters="[{ text: '启用中', value: '启用' }, { text: '已停用', value: '停用' }]"
                           :filter-method="filterTag1" filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status | statusFilter">{{scope.row.status | formatStata}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" sortable label="创建时间"></el-table-column>
          <el-table-column prop="name" label="操作">
            <template slot-scope="scope">
              <el-button type="text" v-if="scope.row.status === '启用'" @click="edit(scope.row.channelId,scope.row.status)">停用</el-button>
              <el-button type="text" v-else @click="edit(scope.row.channelId,scope.row.status)">启用</el-button>
              <el-button type="text" @click="editInfo(scope.row);dialogVisibless = true;">编辑详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paginationSet">
          <div class="pagination-container">
            <div class="toStart" @click="getDataChannel(1)">首页</div>
            <el-pagination background layout="prev, pager, next" @current-change="getDataChannel"
                           :current-page.sync="currentPage" :total="totalCount.number">
            </el-pagination>
          </div>
        </div>
      </div>

    </el-card>
    <el-dialog title="录入新渠道"
               :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px" size="mini">
        <el-form-item label="属性">
          <el-radio-group v-model="form.channelType">
              <el-radio label="线下">线下</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="渠道">
          <el-input v-model="form.channelName" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input :autosize="{ minRows: 4, maxRows: 6 }" maxlength="100" type="textarea" v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item style="text-align:center;margin:10px 0">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary"  @click="createChannel">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="编辑渠道" :visible.sync="dialogVisibless" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="属性">
          <el-radio-group v-model="form.channelType">
            <el-radio disabled label="线上"></el-radio>
            <el-radio disabled label="线下"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="渠道">
          <el-input v-model="form.channelName" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input :autosize="{ minRows: 4, maxRows: 6}" maxlength="100" type="textarea" v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item style="text-align:center;margin:10px 0">
          <el-button @click="dialogVisibless = false;" >取消</el-button>
          <el-button type="primary" @click="saveChannel">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import * as opreate from 'api/getData'
  import { mapState } from 'vuex'

  export default {
    name: 'channelManagement',
    data () {
      return {
        channelName: null,
        form: {
            channelName: '',
            channelType: '线下',
            description: ''
        },
        dialogVisible: false,
        dialogVisibless: false,
        tableData: [],
        roeID: '',
        currentPage:1,
        totalCount: {}
      }
    },
    filters: {
     statusFilter(status) {
       const statusMap = { 线上: 'primary', 线下: 'danger', 启用:'success', 停用:'info' }
       return statusMap[status]
     },
     formatStata(status) { // 状态显示转换
       const statusMap = { 启用: '启用中', 停用: '已停用' }
       return statusMap[status]
     },
    },
     computed:{
       ...mapState(["user"])
     },
     mounted () {
         this.getDataChannel()
     },
    methods: {
      filterTag(newVal,row){
        return row.channelType === newVal;
      },
      filterTag1(newVal,row){
        return row.status === newVal;
      },
      addChannelSet(){
        this.dialogVisible = true
        Object.assign(this.form, { channelName: '', channelType: '线下',description: '' })
      },
      saveChannel () {
        if(this.form.channelName.trim()){
          opreate.updateChannelSet({
            channelId: this.roeID,
            userPhone: this.user.phone,
            description: this.form.description,
            channelName: this.form.channelName,
            channelType:this.form.channelType
          }).then(res => {
            if(res.data == 'success'){
              this.$message.success('修改成功');
              this.getDataChannel()
            }else {
              this.$message.error('修改失败');
            }
            this.dialogVisibless = false
          })
        }else {
          this.$message.error('渠道不能为空')
        }
      },
      editInfo (row) {
        this.roeID = row.channelId
        let { channelType, channelName, description } = row
        Object.assign(this.form,{ channelType, channelName, description })
      },
      edit (row,status) {
        let statusInfo = '启用' === status ?  '停用' : '启用'
        opreate.updateChannelSet({
          channelId: row,
          userPhone: this.user.phone,
          status: statusInfo
        }) .then((res) => {
          this.$message.success('操作成功')
          this.getDataChannel()
        })
      },
      createChannel () {
        if(this.form.channelName.trim()){
          opreate.createChannelSet({
            channelName: this.form.channelName,
            channelType: this.form.channelType,
            description: this.form.description,
            userPhone: this.user.phone
          }).then((res) => {
            if(res.data == 'success'){
              this.$message.success('创建成功')
            }else {
              this.$message.error('错了哦，请稍后再试')
            }
            this.dialogVisible = false
          })
        }else {
          this.$message.error('渠道不能为空')
        }
      },
      getDataChannel(pageNumber = 1){
        opreate.getChannelDetail({
          channelName: this.channelName,
          pageNumber: pageNumber
        }).then(res => {
          let { currentPage, list = [], totalRecord } = res.data.page || {}
          this.currentPage = currentPage
          this.tableData = list
          this.totalCount = res.data
        })
       }
     }
  }
</script>

<style scoped>
  .pickerOptionSet{
    display: flex;
    justify-content:
      space-between;
    align-items: center;
  }
</style>

